<template>
	<view class="home-page">
		<!-- 搜索 -->
		<view class='home-seach'>
			<u-icon size="32" color="#BFBFBF" name="search" class="home-seach-icon"></u-icon>
			<view class="home-seach-pl">搜索您想要的内容</view>
	  </view>
		<!-- 轮播图 -->
		<view class="home-swiper-box" v-if="storeAdvList.length>0">
			<view class="home-swiper">
				<u-swiper :list="storeAdvList" img-mode="scaleToFill" height="300"  border-radius="16"></u-swiper>
			</view>
		</view>
		<!-- 广告位 -->
		<view class="home-img-box">
			<view class="home-top-img">
				<image class="img-left" src="http://other.ghtccs.com/wx-img-static/cpzs.png"></image>
				<view class="home-conter-right">
					<image src="http://other.ghtccs.com/wx-img-static/ysp2.png"  data-type="1"></image>
					<image src="http://other.ghtccs.com/wx-img-static/ysp.png"  data-type="2"></image>
				</view>
			</view>
		</view>
		<!-- 推荐列表 -->
		<view class="home-list">
			<scroll-view class="home-list-nav" scroll-x="true" scroll-left="navScrollLeft" scroll-with-animation="true">
				<view class="home-list-box">
					<view class="home-list-top home-text">
						推荐
					</view>
					<view class="home-list-buttom red-text">
						猜你喜欢
					</view>
				</view>
				<view class="home-list-box">
					<view class="home-list-top">
						食品
					</view>
					<view class="home-list-buttom">
						美食保健
					</view>
				</view>
				<view class="home-list-box">
					<view class="home-list-top">
						食品
					</view>
					<view class="home-list-buttom">
						美食保健
					</view>
				</view>
				<view class="home-list-box">
					<view class="home-list-top">
						食品
					</view>
					<view class="home-list-buttom">
						美食保健
					</view>
				</view>
				<view class="home-list-box">
					<view class="home-list-top">
						食品
					</view>
					<view class="home-list-buttom">
						美食保健
					</view>
				</view>
				<view class="home-list-box">
					<view class="home-list-top">
						食品
					</view>
					<view class="home-list-buttom">
						美食保健
					</view>
				</view>
				<view class="home-list-box">
					<view class="home-list-top">
						食品
					</view>
					<view class="home-list-buttom">
						美食保健
					</view>
				</view>
				<view class="home-list-box">
					<view class="home-list-top">
						食品
					</view>
					<view class="home-list-buttom">
						美食保健
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 推荐商品 -->
		<view class="home-goods">
			<view class="home-goods-list">
				<image src="/static/picture/log.png"></image>
				<view class="home-goods-text">
					<view class="title">端午节粽子端午美食摄影 粽子米粽传统美食</view>
					<text class="preferential"><text>¥</text>338</text>
					<text class="costPrice">¥532</text>
				</view>
			</view>
			<view class="home-goods-list">
				<image src="/static/picture/log.png"></image>
				<view class="home-goods-text">
					<view class="title">端午节粽子端午美食摄影 粽子米粽传统美食</view>
					<text class="preferential"><text>¥</text>338</text>
					<text class="costPrice">¥532</text>
				</view>
			</view>
			<view class="home-goods-list">
				<image src="/static/picture/log.png"></image>
				<view class="home-goods-text">
					<view class="title">端午节粽子端午美食摄影 粽子米粽传统美食</view>
					<text class="preferential"><text>¥</text>338</text>
					<text class="costPrice">¥532</text>
				</view>
			</view>
			<view class="home-goods-list">
				<image src="/static/picture/log.png"></image>
				<view class="home-goods-text">
					<view class="title">端午节粽子端午美食摄影 粽子米粽传统美食</view>
					<text class="preferential"><text>¥</text>338</text>
					<text class="costPrice">¥532</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data () {
		return {
			navScrollLeft:0,
			storeAdvList:[
					{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				]
		}
	}
}
</script>

<style scoped>
.home-page{
	width: 750rpx;
	padding: 0 24rpx;
}
/* 搜索 */
	.home-seach{
		margin-top: 27rpx;
		width:100%;
		border-radius: 250rpx;
		background: #E3E3E5;
		height:64rpx;
		display: flex;
		align-items: center;
	}
	.home-seach-icon{
		margin-left:20rpx;
		margin-right:12rpx;
	}
	.home-seach-pl{
		color: #999999;
		font-size: 28rpx;
	}
	/* 轮播图 */
	.home-swiper-box{
		padding-top:12rpx;
	}
	/* 广告位 */
	.home-img-box{
		padding-top:30rpx;
	}
		.home-img-box .home-top-img{
		display: flex;
		justify-content: space-between;
	}
	.home-img-box .img-left{
		height: 462rpx;
		width: 49%;
		border-radius: 8rpx;
	}
	.home-conter-right{
		width: 49%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.home-conter-right image{
		width: 100%;
		height: 223rpx;
	}
	/* 推荐列表 */
	.home-list{
		padding-top: 30rpx;
		width: 100%;
		height: 100%;
	}
	.home-list-box{
		width: 18%;
    display: inline-block;
		text-align: center;
		/* margin-left: 24rpx; */
	}
	.home-list-nav {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background: #ffffff;
    white-space: nowrap;
	}
	.home-text{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #E95D58;
	}
	.red-text{
		height: 32rpx;
		background: #E95D58;
		border-radius: 16rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 1.5;
	}
	.home-list-top{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.home-list-buttom{
		margin-top: 13rpx;
	}

	/* 推荐商品 */
	.home-goods{
		display: flex;
		flex-wrap: wrap;
		margin: 24rpx 0;
	}
	.home-goods-list{
		width: 50%;
		height: 510rpx;
	}
	.home-goods-list image{
		width: 343rpx;
		height: 343rpx;
	}
	.home-goods-text{
		margin: 24rpx 19rpx;
	}
	.home-goods-list .title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		text-align: left;
	}
	.home-goods-list .preferential{
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #E95D58;
	}
	.home-goods-list .preferential text{
		font-size: 24rpx;
	}
	.home-goods-list .costPrice{
		font-size: 22rpx;
		font-family: PingFang SC;
		color: #999999;
		text-decoration:line-through;
		margin-left: 14rpx;
	}
</style>
